<template>
	<view class="comment_box">
		<!-- v-if="comment" -->
		<view class="comment">
			<view class="com_title">
				评论
			</view>
			<!-- input -->
			<view class="input_box">
				<image class="img"
					src="https://img2.baidu.com/it/u=1052567076,3275246168&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
					mode="widthFix"></image>
				<input type="text" disabled="ture" class="input_txt" value="说点什么，让TA也认识爱做饭的你" />
			</view>
			<!-- 用户评论区 -->
			<block v-for="e,i in comment || noteComment.comments" :key="i">
				<view class="user_info">
					<view class="info_img">
						<image class="img_u" :src="`${e.u.p}`" mode=""></image>
					</view>
					<!-- zho -->
					<view class="info_text">
						<!-- shang -->
						<view class="t_name">
							<view class="nn">
								{{e.u.n}}
							</view>
							<view class="LV">
								LV.{{e.u.lvl}}
							</view>
						</view>
						<!-- address -->
						<view class="address" v-if="e.at">
							{{e.at}}
						</view>
						<!-- 评论 comment -->
						<view class="t_com" v-for="ce,ci in e.content" :key="ci">
							{{ce.c}}
						</view>
						<!-- 回复内容 -->
						<block v-if="e.child_comments.length > 0">
							<view class="reply">
								<view class="reply_item" v-for="ccc,iii in e.child_comments">
									<text class="item_1">{{ccc.u.n}}:</text>
									<text
										class="item_2">{{ccc.reply_user.n == e.u.n ? '':"回复"+ ccc.reply_user.n +':'}}</text>
									{{ccc.content[0].c}}
								</view>
							</view>
						</block>
					</view>
					<!-- like icon -->
					<uni-icons type="heart" size="24"></uni-icons>
					<view class="nums" v-if="e.like_count">
						{{e.like_count}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<!-- https://img2.baidu.com/it/u=1052567076,3275246168&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800 -->
<script>
	export default {
		name: "compComment",
		props: ["comment", "noteComment"],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.comment_box {
		width: 100%;
	}

	.comment {
		width: 94%;
		margin: 0 auto;

		.com_title {
			font-size: 38rpx;
			font-weight: 500;
			margin: 30rpx 0;
		}

		// imput  
		.input_box {
			width: 100%;
			padding: 10rpx 0;
			border-radius: 50rpx;
			background-color: #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-left: 10rpx;
			}

			.input_txt {
				width: 80%;
				font-size: 26rpx;
				color: #999999;
				font-weight: bold;
			}
		}

		// 用户评论区
		.user_info {
			display: flex;
			justify-content: space-between;
			padding: 60rpx 0;

			// img
			.info_img {
				.img_u {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
				}
			}

			// zho
			.info_text {
				display: flex;
				flex-direction: column;
				width: 75%;

				// color: #ffb31a;
				.t_name {
					display: flex;
					align-items: flex-end;
					margin-bottom: 10rpx;

					.nn {
						font-size: 28rpx;
						font-weight: bold;
					}

					.LV {
						margin-left: 10rpx;
						font-size: 20rpx;
						color: #ffb31a;
					}
				}

				// address
				.address {
					font-size: 26rpx;
					color: #9A9A9A;
					margin-bottom: 10rpx;
				}

				// 评论 comment
				.t_com {
					width: 100%;
					// background-color: #007AFF;
					// font-weight: 600;
					margin-bottom: 10rpx;
					letter-spacing: 4rpx;
					text-indent: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.reply {
					width: 100%;
					
					margin-bottom: 10rpx;
					letter-spacing: 4rpx;
					text-indent: 20rpx;
					
					background-color: #FAFAFA;
					padding: 20rpx 10rpx;
					border-radius: 10rpx;

					.reply_item {
						padding: 6rpx 0;
						font-size: 26rpx;
						
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						.item_1 {
							font-weight: 600;
						}

						.item_2 {
							font-weight: 600;
						}
					}
				}
			}
		}
	}
</style>
